
<template>
  <div class="card-title">
    <div class="card-title_title">
      <span>
        <span class="iconfont icon-liulanqi-IE"></span>
          实用开发资源
        </span>
      <i></i>
    </div>
    <div class="tools">
      <a v-for="(item,index) in webTools" :key="index" :href="item.herf" target="_blank">
        <img :src="item.img">
        <div>
          <p class="name">{{ item.name }}</p>
          <p class="doc">{{ item.doc }}</p>
        </div>
      </a>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getTool } from '../service/api/Blogger'
const webTools = ref()
const getToolList = async ()=> {
  await nextTick()
  try{
    const res:any = await getTool({})
    const data = res.data._value.data
    webTools.value = data
    console.log(data)
  }catch(err) {
    console.log(err)
  }
}
onMounted(()=>{
  getToolList()
})
</script>
<style scoped lang="scss">
.tools{
  // width: 250px;
  padding: 20px 0;
  background: #fff;
  text-align: -webkit-center;
  // text-align: center;
  a:hover{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5)
  }
  a{
    display: flex;
    width: 86%;
    color: #fff;
    align-items: center;
    margin-bottom: 10px;
    background-color: rgba($color: $yun-color, $alpha: 1) ;
    padding: 10px;
    border-radius: 4px;
    transition: all 0.5s;
    img{
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 5px;
    }
    div{
      .name{
        font-size: 16px;
        margin-bottom: 4px;
        text-align: left;
      }
      .doc{
        font-size: 12px;
        color: #fff;
        text-align: left;
      }
    }
  }
}
</style>